<!DOCTYPE html>
<html>
	<!-- 商铺出售-信息填写 -->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="../../static/public/css/findshopinfwrite.css" />
		<link rel="stylesheet" type="text/css" href="../../static/public/css/public.css" />
		<link rel="stylesheet" type="text/css" href="../../static/public/swiper/css/swiper.min.css" />
		<!-- 行业选择器 -->
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
		<link rel="stylesheet" href="../../static/customer/css/mpicker.css">
		<!-- 行业选择器结束 -->
		<script src="../../static/public/js/jquery.min.js"></script>
<!-- 		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 -->		<script src="../../static/public/swiper/js/swiper.min.js"></script>
		<script src="../../static/public/js/dySelect.js"></script>
		<script>
		      //图片上传预览    IE是用了滤镜。
		        function previewImage(file)
		        {
		          var MAXWIDTH  = 90; 
		          var MAXHEIGHT = 90;
		          var div = document.getElementById('preview');
		          if (file.files && file.files[0])
		          {
		              div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';
		              var img = document.getElementById('imghead');
		              img.onload = function(){
		                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
		                img.width  =  rect.width;
		                img.height =  rect.height;
		//                 img.style.marginLeft = rect.left+'px';
		                img.style.marginTop = rect.top+'px';
		              }
		              var reader = new FileReader();
		              reader.onload = function(evt){img.src = evt.target.result;}
		              reader.readAsDataURL(file.files[0]);
		          }
		          else //兼容IE
		          {
		            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
		            file.select();
		            var src = document.selection.createRange().text;
		            div.innerHTML = '<img id=imghead>';
		            var img = document.getElementById('imghead');
		            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
		            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
		            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
		            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
		          }
		        }
		        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
		            var param = {top:0, left:0, width:width, height:height};
		            if( width>maxWidth || height>maxHeight ){
		                rateWidth = width / maxWidth;
		                rateHeight = height / maxHeight;
		                
		                if( rateWidth > rateHeight ){
		                    param.width =  maxWidth;
		                    param.height = Math.round(height / rateWidth);
		                }else{
		                    param.width = Math.round(width / rateHeight);
		                    param.height = maxHeight;
		                }
		            }
		            param.left = Math.round((maxWidth - param.width) / 2);
		            param.top = Math.round((maxHeight - param.height) / 2);
		            return param;
		        }
		    </script>
		<link rel="stylesheet" href="../../static/public/css/LArea.css">
	</head>
	<style>
		
		.addhouseimggb{
			width: 100%;
			background: #F8F8F8;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 39vw;
		}
		.addhouseimg{
			width: 37vw;
			height: 37vw;
			background-color: #ffffff;
		}
		.slide-wapper {
				padding:20px;
				overflow-y: scroll;
				/* background: #eee; */
		}
	</style>
	<body>




		<form class="formclass">
			<div class="addhouseimggb">
				<div id="preview">
							<img id="imghead" border="0" src="../../static/images/addhouseimg.png" class="addhouseimg" width="90" height="90" onclick="$('#previewImg').click();">
					</div>         
					<input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg">
			</div>
			
			<!-- <div class="line"></div> -->
			<div class="inputbg">
				<div class="inp">
					<div class="xing">*</div>
					<div class="name">标题</div>
					<div class="inputline"></div>
					<input type="text" name="tit" placeholder="请输入标题" />
				</div>
				<div class="inp">
					<div class="xing">*</div>
					<img src="../../static/images/yousanjiao.png" class="yousanjiao xingzhi" />
					<div class="name">性质</div>
					<div class="inputline"></div>
					<div class="nowriteinput xingzhi" style="color: #cccccc;">请选择性质</div>
					<!-- <input type="text" name="xingzhi" placeholder="请选择性质" disabled="disabled" class="xingzhi"/> -->
				</div>
				<div class="inp">
					<div class="xing">*</div>
					<img src="../../static/images/yousanjiao.png" class="yousanjiao select-value" />
					<div class="name">行业</div>
					<div class="inputline"></div>
					<!-- <div class="nowriteinput select-value" style="color: #cccccc;">请选择行业</div> -->
					<input type="text" name="industry" placeholder="请选择行业" disabled="disabled" class="select-value"/>
				</div>
				<div class="inp" style="border-bottom: 0px #eeeeee solid;">
					<div class="xing">*</div>
					<img src="../../static/images/yousanjiao.png" class="yousanjiao" id="quyu" />
					<div class="name">区域</div>
					<div class="inputline"></div>
					<!-- <div class="nowriteinput">请选择区域</div> -->
					<!-- <input id="demo1" type="text" name="qy" placeholder="请选择区域"/> -->
					<input id="demo1" type="text" readonly="" placeholder="请选择区域" />
					<script src="../../static/public/js/LAreaData1.js"></script>
					<script src="../../static/public/js/LAreaData2.js"></script>
					<script src="../../static/public/js/LArea.js"></script>
					<script>
						var area1 = new LArea();
						area1.init({
							'trigger': '#demo1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
							'valueTo': '#value1', //选择完毕后id属性输出到该位置
							'keys': {
								id: 'id',
								name: 'name'
							}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
							'type': 1, //数据源类型
							'data': LAreaData //数据源
						});
						area1.value=[1,15,3];//控制初始位置，注意：该方法并不会影响到input的value
						var area2 = new LArea();
						area2.init({
							'trigger': '#demo2',
							'valueTo': '#value2',
							'keys': {
								id: 'value',
								name: 'text'
							},
							'type': 2,
							'data': [provs_data, citys_data, dists_data]
						});
					</script>
				</div>
			</div>
			<div class="line"></div>
			<div class="inputbg">
				<div class="inp">
					<div class="posit">
						<div class="xing">*</div>
						<div class="name">详细地址</div>
					</div>
					<div style="display: flex;color: white;">
						<div class="xing" style="color: white;">*</div>
						<div class="name">详细地址</div>
					</div>

					<!-- <img src="../../static/images/yousanjiao.png" class="yousanjiao" id="place"/> -->
					<div class="inputline"></div>
					<!-- <div class="nowriteinput">请输入详细地址</div> -->
					<input type="text" name="xxdz" placeholder="请输入详细地址" />
				</div>
				<div class="inp">
					<div class="xing">*</div>
					<img src="../../static/images/yousanjiao.png" class="yousanjiao mianji" />
					<div class="name">面积</div>
					<div class="inputline"></div>
					<div type="text" name="mianji" class="mianji" style="width: 69%;">
						<span class="mianjinum">0</span>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span style="color: #cccccc;">平米</span>
					</div>
				</div>
				<div class="inp">
					<div class="xing">*</div>
					<img src="../../static/images/yousanjiao.png" class="yousanjiao danjia" />
					<div class="name">单价</div>
					<div class="inputline"></div>
					<div type="text" name="danjia" style="width: 69%;" class="danjia">
						<span class="danjianum">0</span>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span style="color: #f2a602;">元/m²</span>
					</div>
				</div>
				<div class="inp">
					<div class="xing">*</div>
					<img src="../../static/images/yousanjiao.png" class="yousanjiao zongjia" />
					<div class="name">总价</div>
					<div class="inputline"></div>
					<div type="text" name="zongjia" style="width: 69%;" class="zongjia">
						<span class="zongjianum">0</span>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span style="color: #f2a602;">万/套</span>
					</div>
				</div>
				<div class="inp">
					<div class="xing">*</div>
					<img src="../../static/images/yousanjiao.png" class="yousanjiao rll" />
					<div class="name">人流量</div>
					<div class="inputline"></div>
					<div class="nowriteinput rll" style="color: #cccccc;">请选择人流量</div>
					<!-- <input type="text" name="rll" placeholder="请选择人流量" disabled="disabled"/> -->
				</div>
			</div>

			<div class="discript">
				<div class="tit">商铺自评:</div>
				<textarea placeholder="请输入详情介绍" class="con"></textarea>
			</div>
			<div class="line"></div>

			<div class="inputbg">
				<div class="inp">
					<div class="xing">*</div>
					<div class="name">姓名</div>
					<div class="inputline"></div>
					<input type="text" name="name" placeholder="请输入真实姓名" />
				</div>
				<div class="inp">
					<div class="xing">*</div>
					<div class="name">手机号</div>
					<div class="inputline"></div>
					<input type="text" name="iphonenum" placeholder="请输入手机号码" style="width: 50%;" />
					<div class="yzm">获取验证码</div>
				</div>
				<div class="inp" style="border-bottom: 0px #eeeeee solid;">
					<div class="xing">*</div>
					<div class="name">验证码</div>
					<div class="inputline"></div>
					<input type="text" name="yzm" placeholder="请输入验证码" />
				</div>
			</div>

			<input type="submit" value="确定录入" class="sub" />
		</form>
		<div id="app" class="w750">
			<div class="select_box select_box1"></div>
			<div class="select_box select_box2"></div>
			<div class="select_box select_box3"></div>
			<div class="select_box select_box4"></div>
			<div class="select_box select_box5"></div>
			<div class="select_box select_box6"></div>
			<div class="select_box select_box7"></div>
		</div>

		<script src="../../static/public/js/index.js"></script>
		<!-- 行业选择器 -->
		    <script src="../../static/customer/js/json.js"></script>
		    <script src="../../static/customer/js/jsonExchange.js"></script>
		    <script src="../../static/customer/js/mPicker.js"></script>
		    <script chartset="UTF-8">
		    $(function() {
		        
		        /**
		         * 联动的picker
		         * 三级
		         */
		        $('.select-value').mPicker({
		            level:2,
		            dataJson: industry,
		            Linkage:true,
		            rows:6,
		            idDefault:true,
		            splitStr:'-',
		            header:'',
		            confirm:function(json){
		               
		            },
		            cancel:function(json){
		                
		            }
		        })
		        //获取value
		        function getVal(){
		            var value1 = $('.select-value1').data('value1');
		            var value2 = $('.select-value1').data('value2');
		            var result='';
		            value1 = value1 || '';
		            value2 = value2 || '';
		            if(value1){
		                result= value1;
		            }
		            if(value2){
		                result = result+'-'+ value2;
		            }
		            return {
		                value:[value1, value2],
		                result: result
		            };
		        }
		    });
		    </script>
	</body>
</html>
